
import React from 'react'
import * as CalendarAction  from '../../actions/CalendarAction';
import * as ApiMsgAction  from '../../actions/ApiMsgAction';
import { connect }  from 'react-redux';
import DatePicker from 'react-datepicker'
import _ from 'lodash'

class PropertyCalendar extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      data: {}
    }
  }

  componentDidMount() {

  }

  componentDidUpdate() {

  }

  componentWillReceiveProps(props) {
    if (!this.state.property || props.property.id != this.state.property.id) {
      this.setState({
        property: props.property,
        data: {
          property_id: props.property.id
        }
      })
      this.props.dispatch(
        CalendarAction.loadCalendarDataAsync({
          property_id: props.property.id
        })
      )
    }
  }

  onCalendarCreate() {

    var vacationDate = this.state.data.vacationDate
    if (!vacationDate || vacationDate.trim().length == 0) {
      alert("请选择日期!")
      return
    }
    var date = new Date(vacationDate)
    if (date == 'Invalid Date') {
      alert("请选择日期!")
      return
    }

    var desc = this.state.data.desc
    if (!desc || desc.trim().length == 0) {
      alert("请输入备注!")
      return
    }

    var data = _.assign(this.state.data, {})
    this.props.dispatch(
      CalendarAction.createCalendarDataAsync(data)
    )
    this.setState({
      data: {
        property_id: this.props.property.id
      },
      selected: null
    })
  }

  onCalendarDelete(data) {
    if (confirm("确定要删除该日期吗?")) {
      this.props.dispatch(
        CalendarAction.deleteCalendarDataAsync({
          calendar_id: data.id,
          property_id: this.props.property.id
        })
      )
    }
  }

  onChange(event, key) {
    var value = $(event.target).val();
    var data = this.state.data;
    data[key] = value;
    this.setState({
      data: data
    })
  }

  handleVacationDateChange(date) {
    this.setState({
      selected: date
    })
    if (date) {
      var data = this.state.data
      data.vacationDate = date.format("YYYY-MM-DD")
      this.setState({
        data: data
      })

    }

  }

  checkEmpty(str) {
    return !str || str.length == 0;
  }

  pad(str, length) {
    str = str + ""
    if (str.length == length) {
      return str
    }
    return this.pad("0"+str, length)
  }

  renderCalendarList() {
    var self = this
    var content = []
    var calendar = this.props.calendar
    if (calendar && calendar.length > 0) {
      calendar.forEach(function(data) {
        var vacationDate = new Date(data.vacationDate),
            date
        if (data.vacationDate) {
          date = vacationDate.getFullYear()+"-"+
                self.pad((vacationDate.getMonth()+1), 2)+ "-" +
                self.pad(vacationDate.getDate(), 2)
        }
        content.push((
          <tr>
            <td>{date}</td>
            <td>{data.desc}</td>
            <td>
              <a className="edit" onClick={(event)=>self.onCalendarDelete(data)}>删除</a>
            </td>
          </tr>
        ))
      })
    }

    return content
  }

  render() {
    var self = this;
    var title = "假期配置"
    if (this.props.property) {
      title = this.props.property.name + " " + title
    }
    return (
      <div className="modal fade vacationModal" id="PropertySettingEdit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 className="modal-title" id="Property-modal-label">{title}</h4>
            </div>
            <div className="modal-body">
              <div className = "panel panel-default">
                <div className = "panel-heading">新建假期</div>
                <div className = "panel-body">
                  <div className="form-group">
                    <label for="workUnit">日期</label>
                    <DatePicker
                      className = "vacation-picker form-control"
                      dateFormat="YYYY-MM-DD"
                      locale='zh-cn'
                      selected = {this.state.selected}
                      placeholderText = "日期"
                      onChange={this.handleVacationDateChange.bind(this)} />
                  </div>
                  <div className="form-group">
                    <label for="workUnit">备注</label>
                    <input ref="workUnit" type="text" className="form-control"
                            id="workUnit" placeholder="备注" value={this.state.data.desc}
                            onChange={(event)=>this.onChange(event, 'desc')}
                            />
                  </div>
                  <button type="button" className="btn btn-primary"
                          onClick={(event)=>this.onCalendarCreate(event)}>添加</button>
                </div>
              </div>
              <div className="panel panel-default">
                <div className="panel-heading">已添加</div>
                <div className="panel-body">
                  <table className="table table-hover">
                    <thead>
                      <tr className="table-title">
                        <th>假期</th>
                        <th>备注</th>
                        <th className="infoTh">编辑</th>
                      </tr>
                    </thead>
                    <tbody>
                      {self.renderCalendarList()}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return { calendar: state.calendar.data}
}

export default connect(mapStateToProps)(PropertyCalendar)
